<template>
  <div class="defaultAddrs">
    <el-dropdown
      trigger="click"
      popper-class="dropdown-menu"
      class="dropdown"
      @command="dropdownComm"
    >
      <span class="el-dropdown-link">
        <el-icon class="ico" v-if="weatherStore.currentLocation?.isDefault"><House /></el-icon>
        <span v-if="weatherStore.currentLocation?.isDefault">
          {{ weatherStore.currentLocation?.name || '获取中...' }}</span
        >
        <span v-else
          >{{ weatherStore.currentLocation?.adm1 }}-{{ weatherStore.currentLocation?.adm2 }}-{{
            weatherStore.currentLocation?.name
          }}</span
        >
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <div class="dropdown-title">我的位置</div>
        <el-dropdown-menu>
          <el-dropdown-item
            v-for="location in weatherStore.allLocations"
            :key="location.id"
            :command="location.id"
          >
            <span>{{
              `${location.country || ''}-${location.adm1 || ''}-${location.adm2 || ''}-${location.name || ''}`
            }}</span>
            <el-icon class="dropdown-ico" v-if="location.isDefault"><House /></el-icon>
            <i
              :class="`qi-${location.weather?.now?.icon || ''}-fill`"
              class="dropdown-item-ico"
            ></i>
            <!-- 今日温度 -->
            <span class="temperature">{{ location.weather?.now?.temp || '' }} </span>
            <span class="unit" style="vertical-align: top; font-size: 15px">&#x2103; </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { useWeatherStore } from '@/stores/weather'

const weatherStore = useWeatherStore()
function dropdownComm(locationName: any) {
  const location = weatherStore.getLocationById(locationName)
  if (location) {
    weatherStore.setCurrentLocation(location.id)
  }
}
</script>
<style scoped lang="scss">
.Today {
  margin-top: 20px;
}
.defaultAddrs {
  margin: 10px 0;

  .el-dropdown-link {
    .ico {
      margin-right: 5px;
    }
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.dropdown-ico {
  margin: 0 10px;
}
.dropdown-item-ico {
  font-size: 20px;
  margin: 0 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  main {
    min-width: 650px;
  }
  header {
    .defaultAddrs {
      .el-dropdown-link {
        font-size: 14px;

        span {
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.dropdown-title {
  margin-left: 15px;
  margin-top: 15px;
}
.defaultAddrs {
  display: flex;
}
</style>
